

class Page{
    constructor(){
        this.pagination=$(".pagination");
        this.url="http://localhost:3000/json/ssygoods.json"
        this.num=15
        this.load()
    }
    load(){
        $.ajax({
            url:this.url,
            success:(res)=>{
                var arr=JSON.parse(res)
                this.res=arr
                this.createPage()
            }
        })
    }
    createPage(){
        this.pagination.pagination(this.res.length, {
            items_per_page:this.num,
            prev_text:"上一页",
            next_text:"下一页",
            callback:(index)=>{
                this.index=index
                this.render()
            }
        })
    }
    render(){
        let str=""
        for(let i=this.num*this.index;i<this.num*this.index+this.num;i++){
            if(i<this.res.length){
                str+=`
                <div class="goods">
                <p class="img"><a href="../html/spxqy.html?${this.res[i].proName}"><img src="${this.res[i].img}" alt=""></a></p>
                <p class="t1">${this.res[i].brand}</p>
                <p class="t2"><a href="../html/spxqy.html?${this.res[i].proName}">${this.res[i].proName}</a></p>
                <p class="pr"><span>￥</span><span>${this.res[i].price}</span></p>
            </div>
                `
            }
        }
        $(".main").html(str);
    }
}

const pr=document.querySelector(".BODY .price")
const arrow=document.querySelector(".BODY .price .down")
var index=0
pr.onclick=function(){
    if(!index){
        arrow.style.borderTop="5px solid transparent"
        arrow.style.borderBottom="5px solid white"
        new Page()
        index=1
    }
    else if(index){
        arrow.style.borderBottom="5px solid transparent"
        arrow.style.borderTop="5px solid white"
        new Page()
        index=0
    }
}